﻿
@{
    ViewBag.Title = "会员登录";
    Layout = "~/Views/Shared/_MyLayout.cshtml";
}

@section head{

    <link rel="stylesheet" type="text/css" href="~/Content/WxPage.css?d=@DateTime.Now" />
    <link rel="stylesheet" type="text/css" href="~/Scripts/DateJS/date/css/index.css?d=@DateTime.Now" />
    @Scripts.Render("~/bundles/jquery")
    <script src="~/Scripts/DateJS/date/js/date.js"></script>
    @*@ViewBag.HotelID;*@

}




@*<div style="text-align:center;width:100%;background-size:100% 100%;background-color:rgb(255,255,245);padding-top:30%;" onclick="SelectHotel('209412')">
    <img style="width:50%;" src="~/Content/IMG/mainlogo.png" />
</div>*@

<div style="width:80%;margin:20px auto;border-style:solid;border-width:1px;height:150px;border-radius:10px;">
    <div style="width:45%;vertical-align:middle;text-align:center;line-height:150px;float:left;">
        <img style="vertical-align:middle;width:100%;height:120px;" src="~/Content/IMG/imgLogo.png" />
    </div>
    <div style="float:left;width:43%;background-color:transparent;margin-left:20px">
        <p style="margin-top:20px;font-size:14px;font-weight:normal;margin-bottom:0px">Welcome to WUYU</p>
        <p style="margin-top:0px;font-size:14px;font-weight:normal;margin-bottom:0px">Family</p>
        <p style="margin-top:15px;font-size:17px;font-weight:normal;margin-bottom:0px;letter-spacing:3px;">欢迎加入</p>
        <p style="margin-top:0px;font-size:17px;font-weight:normal;margin-bottom:0px;letter-spacing:3px;">无隅大家庭</p>
    </div>
</div>
<div class="RORoomNum" style="width:80%;">
    <div style="width:50px;height:35px;">
        <p style="line-height:25px;font-size:15px;margin:0;">姓&nbsp;&nbsp;&nbsp;&nbsp;名</p>
    </div>
    <div class="styled-select" style="flex:1 1 auto;height:25px;border-style:solid;border-width:1px;border-color:darkgray;">
        <input type="text" placeholder="    请输入姓名" name="CheckInName" style="font-size:13px;line-height:21px;width:100%;border:0;" />
    </div>
</div>
<div class="RORoomNum" style="width:80%;">
    <div style="width:50px;height:35px;float:left">
        <p style="line-height:25px;font-size:15px;margin:0;">手机号</p>
    </div>
    <div class="styled-select" style="float:left;width:50%;height:25px;border-style:solid;border-width:1px;border-color:darkgray;">
        <input type="tel" placeholder="    填写手机号" maxlength="11" name="CheckInPhone" style="font-size:13px;line-height:21px;width:100%;border:0;" />
    </div>
    <div id="SMS" onclick="SMSSend()" class="styled-select" style="height:25px;width:30%;background-color:rgb(97,192,170);margin-left:10px;">
        <p id="SMSBtnContent" style="font-size:10px;line-height:25px;border:0;margin:0;text-align:center;color:white;">点击获取验证码</p>
    </div>
</div>
@*<div class="RORoomNum">
    <div class="styled-select" style="flex:1 1 auto;height:35px;width:100%;">
        
    </div>
    <div id="SMS" onclick="SMSSend()" class="styled-select" style="flex:1 1 auto;height:35px;width:100%;border-radius:5px;background-color:burlywood;">
        <p id="SMSBtnContent" style="font-size:15px;line-height:35px;border:0;margin:0;text-align:center;">点击获取验证码</p>
    </div>
    <div class="styled-select" style="flex:1 1 auto;height:35px;width:100%;">
        
    </div>
</div>*@

<script type="text/javascript">
    var Count = 60;
    var CurrentCount = -1;
    var TimerState = false;
    var timer;
    //$("#SMS").attr("onclick","SMSSend()");
    function SMSSend() {
        var ClientName = $("input[name='CheckInName']").val();
        var PhoneNum = $("input[name='CheckInPhone']").val();
        if (isNaN(PhoneNum) || PhoneNum=="") {
            alert("请输入正确电话号码");
            return;
        }
        if (ClientName == "")
        {
            alert("请输入姓名");
            return;
        }
        $("#SMS").removeAttr("onclick");
        CurrentCount = Count;
        timer = window.setInterval(TimerCallBack, 1000);
        $("#SMSBtnContent").css("color", "darkgrey");
        //这里用ajax通过后台发短信出来，待添加安全性
        $.ajax({
            type: "POST",
            url: "/WxPage/SMSRegister",
            async: true,
            data: { "ClientName": ClientName, "PhoneNum": PhoneNum },
            success: function (msg) {
                if (msg == 0) {
                    alert("发送失败");
                    return;
                } else if (msg == 3) {
                    alert("该手机号已注册");
                    return;
                } else if (msg == 2) {
                    alert("验证码发送时间过短");
                    return;
                } else if (msg == 4) {
                    //cookies获取失败，需要重新重新读该页面
                    window.location.href = "/WxPage/Register";
                    return;
                }
                else {
                    //表示正常，开始读秒
                    alert("验证短信已发送，注意查收");
                }
            }
        });
    }



    function TimerCallBack() {
        CurrentCount--;
        $("#SMSBtnContent").text("等待" + CurrentCount + "秒重发");
        if (CurrentCount < 0) {
            window.clearInterval(timer);
            $("#SMS").attr("onclick", "SMSSend()");
            $("#SMSBtnContent").text("点击获取验证码");
            $("#SMSBtnContent").css("color", "black");
        }
    }

</script>

<div class="RORoomNum" style="width:80%;">
    <div style="width:50px;height:35px;">
        <p style="line-height:25px;font-size:15px;margin:0;">验证码</p>
    </div>
    <div class="styled-select" style="flex:1 1 auto;height:25px;border-style:solid;border-width:1px;border-color:darkgray;">
        <input type="number" placeholder="    请填写手机收到的验证码" name="VerifyNum" oninput="if (value.length > 6) value=value.slice(0,6)" style="font-size:13px;line-height:21px;width:100%;border:0;" />
    </div>
</div>
<div style="clear:both;height:20px;">
</div>
<div  style="clear:both;height:45px;display:flex;">
    <div class="styled-select" style="flex:1 1 auto;height:45px;width:100%;">

    </div>
    <div  onclick="VerifyCode()" class="styled-select" style="flex:1 1 auto;height:30px;width:100%;border-radius:15px;background-color:rgb(97,192,170);">
        <p style="font-size:16px;line-height:30px;border:0;margin:0;text-align:center;color:white;font-weight:normal;">点击注册</p>
    </div>
    <div class="styled-select" style="flex:1 1 auto;height:45px;width:100%;">

    </div>
</div>
<script type="text/javascript">

    $(document).ready(function () {
        $("body").css("background-color", "rgb(255,255,245)");

    });






    function VerifyCode() {
        var ClientName = $("input[name='CheckInName']").val();
        var PhoneNum = $("input[name='CheckInPhone']").val();
        var VerifyNum = $("input[name='VerifyNum']").val();
        if (isNaN(PhoneNum) || PhoneNum == "") {
            alert("请输入正确电话号码");
            return;
        }
        if (ClientName == "") {
            alert("请输入姓名");
            return;
        }
        if (isNaN(VerifyNum) || VerifyNum == "") {
            alert("请输入正确验证码");
            return;
        }      
        $.ajax({
            type: "POST",
            url: "/WxPage/VerifyCode",
            async: false,
            data: { "ClientName": ClientName, "PhoneNum": PhoneNum, "VerifyNum": VerifyNum },
            success: function (msg) {
                if (msg == 1) {
                    //正确返回，执行操作
                    alert("注册成功，点击返回首页");
                    top.location = '/WxPage/Index';
                }else if(msg == 2) {
                    alert("用户名，手机号错误");
                    return;
                } else if(msg ==3 ){
                    alert("验证时间超时，请重新发送");
                    return;
                } else if (msg == 4) {
                    alert("验证码错误");
                    return;
                } else if (msg == 5) {
                //cookies获取失败，需要重新重新读该页面
                window.location.href = "/WxPage/Register";
                return;
            }
                else {
                    alert("登录失败，调用住哲API失败");
                    return;
                }
            }
        });
    }
</script>




<div style="clear:both;height:100px;"></div>


<div id="menu" class="Wx_BottomMenu">
    <div id="HomePage" class="subMenu" onclick="JavaScript:window.location.href='/WxPage/MainView'">
        <p style="display:table-cell;vertical-align:middle;margin:0px;font-family:'Microsoft YaHei','微软雅黑';font-size:16px;color:rgb(127,127,127);">首&nbsp;&nbsp;页</p>
    </div>
    <div id="Rent" class="subMenu" style="border-left-width:1px;width:34%;" onclick="JavaScript:window.location.href='/WxPage/Index'">
        <p style="display:table-cell;vertical-align:middle;margin:0px;font-family:'Microsoft YaHei','微软雅黑';font-size:16px;color:rgb(127,127,127);">预&nbsp;&nbsp;订</p>
    </div>
    <div id="Mine" class="subMenu" style="border-right-width:0px;border-left-width:1px;" onclick="JavaScript:window.location.href='/WxPage/Mine'">
        <p style="display:table-cell;vertical-align:middle;margin:0px;font-family:'Microsoft YaHei','微软雅黑';font-size:16px;color:rgb(127,127,127);">会&nbsp;&nbsp;员</p>
    </div>
</div>



